<template>
	<view class="outer_box">
		<view class="choose">
			<view class="">
				<image v-show="checked" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png" mode=""></image>
				<image v-show="!checked" @tap="selectPro(1)" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png" mode=""></image>
				<view class="text" @tap="selectPro(1)">遇到问题</view>
			</view>
			<view class="suggest">
				<image v-show="!checked" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png" mode=""></image>
				<image v-show="checked" @tap="select(2)" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png" mode=""></image>
				<view class="text" @tap="select(2)">功能建议</view>
			</view>
		</view>
		<view class="input">
			<textarea v-model="details" auto-height value="" placeholder="例如您在___的情况下，遇到了___的异常问题"  />
		</view>
		<view class="contact-way-title">
			您的联系方式
		</view>
		<view class="contact-way-content">
			<textarea v-model="phone" auto-height value="" placeholder="联系方式"/>
		</view>
		<view class="Submitbtn" @tap="feedback">
			提交反馈
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
				type:1,
				details:'',
				phone:''
			};
		},
		methods:{
			select(type){
				this.checked = false
				this.type = type
			},
			selectPro(type){
				this.checked = true
				this.type = type
			},
			//提交反馈
			feedback(){
				if(this.type == ''||this.details == ''||this.phone == ''){
					uni.showToast({
					    title: '请填写完整',
					    duration: 2000,
						icon:'none'
					});
				}else{
					this.$api.feedback({
						type: this.type,
						details: this.details,
						phone: this.phone
					}).then((res)=>{
						if(res.data.code == 200){
							uni.showToast({
							    title: '提交成功',
							    duration: 2000
							});
							this.details == '',
							this.phone == ''
						}
						uni.navigateBack({
							delta:1,
							animationDuration:1000
						})
							
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.outer_box{
		display: flex;
		flex-direction: column;
		padding: 20px 30rpx;
		.contact-way-title{
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		.contact-way-content{
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			border: 2rpx solid #EEEEEE;
			border-radius: 10rpx;
			padding: 20rpx ;
			margin-top: 20rpx;
		}
		.input{
			width: 100%;
			height: 300rpx;
			background: #FFFFFF;
			border: 2rpx solid #EEEEEE;
			border-radius: 10rpx;
			margin: 40rpx 0;
			padding: 20rpx ;
			textarea{
				width: 100%;
			}
		}
		.choose{
			display: flex;	
			.text{
				margin-left: 10rpx;
			}
			.suggest{
				margin-left: 20rpx;
			}
			view{
				display: flex;
			}
			image{
				width: 46rpx;
				height: 46rpx;
			}
		}
		.Submitbtn{
			width: 520rpx;
			height: 100rpx;
			background-color: #FF8308;
			border-radius: 50rpx;
			margin: 0 auto;
			margin-top: 100rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 100rpx;
		}
	}

</style>
